<template>
	<view class="forgetPwd">
		<view class="form">
			<u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
				<u-form-item label="注册邮箱" labelWidth="160rpx" prop="email" borderBottom>
					<u--input
						v-model="formData.email"
						type="email"
						border="none"
						placeholder="请输入注册邮箱"
					></u--input>
				</u-form-item>
			</u--form>
		</view>

		<view class="btn_login"><button class="btn" plain :loading="loading" @click="sendEmail">发送邮件</button></view>
	</view>
</template>

<script>
import api from '@/common/api.js';
export default {
	data() {
		return {
			formData: {
				email: ''
			},
			rules: {
				email: {
					validator: (rule, value, callback) => {
						return uni.$u.test.email(value);
					},
					message: '邮箱不正确',
					trigger: ['blur']
				}
			},
			loading: false
		};
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		// 发送邮件
		async sendEmail() {
			let isPass = await this.validateForm();
			// console.log('isPass ==>', isPass);
			if (!isPass) {
				return false;
			}
			this.loading = true;
			let params = {
				email: this.formData.email,
				url: 'https://protograph.cn/ResetPwd'
			};
			try {
				let res = await this.$ajax.post(api.findPwd, params);
				// console.log('findPwdRes ==>', res);
				if (res.data.data) {
					uni.showToast({
						title: '邮件已发送,请注意查收～',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: '请检查邮箱地址是否正确',
						icon: 'none'
					});
				}
				this.loading = false;
			} catch (e) {
				console.log(e);
				this.loading = false;
				uni.showToast({
					title: e.data.message,
					icon: 'error'
				});
			}
		},

		// 表单验证的方法
		validateForm() {
			return new Promise((resolve, reject) => {
				this.$refs.form
					.validate()
					.then(res => {
						resolve(true);
					})
					.catch(err => {
						resolve(false);
					});
			});
		}
	}
};
</script>

<style lang="scss">
.forgetPwd {
	.form {
		padding: 0 32rpx;
	}
	.btn_login {
		margin: 40rpx 32rpx;
	}
	.btn {
		height: 88rpx;
		line-height: 88rpx;
		background-color: #1890ff;
		color: #fff;
		border: 2rpx solid #1890ff;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-weight: 700;
	}
}
</style>
